<%--
  Created by IntelliJ IDEA.
  User: jiang
  Date: 2020/11/28
  Time: 15:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>入库信息</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
</head>
<style>
    .layui-table th {
        font-weight: bold;
    }

    /*下拉框高度*/
    .layui-unselect dl {
        max-height: 120px;
    }
</style>
<body style="padding: 3px">
<!--上侧搜索表单按钮组-->
<div class="layui-elem-field">
    <form class="layui-form layui-form-pane">
        <div class="layui-row">
            <div class="layui-inline layui-col-md-offset1">
                <label class="layui-form-label">入库人</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" placeholder="输入入库人">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">经手人</label>
                <div class="layui-input-inline">
                    <input type="text" name="jsr" class="layui-input" placeholder="输入经手人">
                </div>
            </div>
        </div>
        <hr>
        <div class="layui-row">
            <div class="layui-inline layui-col-md-offset1">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="date" id="kdata" name="kdata" class="layui-input" placeholder="开始时间">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="date" id="edata" name="edata" class="layui-input" placeholder="结束时间">
                </div>
                <button type="submit" lay-submit lay-filter="searchBtn"

                        class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search">搜索
                </button>
                <button type="reset" class="layui-btn" id="searchReset">重置</button>
            </div>
        </div>
    </form>
</div>

<!--数据表格-->
<table class="layui-hide " id="rukuTable" lay-filter="rukuTable"></table>

<!--上侧按钮组-->
<div class="layui-hide" id="userToolbar">
    <label class="layui-icon layui-icon-refresh layui-anim layui-anim-scaleSpring" lay-event="refresh"></label>
</div>

<!--数据表格右侧按钮组-->
<div class="layui-hide" id="userBar">
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="information">查看详情</button>
</div>

<%--入库详情信息表格--%>
<div class="layui-elem-field" style="display: none;border: 0" id="informationDiv">
    <table class="layui-hide" id="informationTable" lay-filter="informationTable"></table>
    总金额：<label id="totalprice"></label>，入库人：<label id="name"></label>，时间：<label id="rdate"></label>
</div>

<script>
    layui.use(['table','layer','form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var condition = "";
        //查询的提交事件
        /*form.on('submit(searchBtn)', function () {


            return false;
        });*/

        form.on('submit(searchBtn)',function (data){

            table.reload("rukuTable",{
                page:{

                    curr:1
                },where:data.field
            });
            return false;
        });
        $("#searchReset").click(function (){
            location=location;
        });
        //重置时要刷新表格
        $("#searchReset").click(function () {
            condition="";
            showTable()
        });


        //渲染入库单表格-showTable()
        function showTable() {
            table.render({
                elem: '#rukuTable'
                , url: '${pageContext.request.contextPath}/ruku/queryRuKu'//数据接口
                , toolbar: '#userToolbar'
                , even: true //开启隔行背景
                , page: true //开启分页
                /*, request: {
                    pageName: 'cur',
                    limitName: 'nums',

                }*/
                ,where: {condition: condition}
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'ruid', title: 'ID', align: 'center'}
                    , {field: 'totalprice', title: '总金额', align: 'center'}
                    , {field: 'totalcount', title: '总数量', align: 'center'}
                    , {field: 'uid', title: '入库人Id', align: 'center', hide: true}
                    , {field: 'name', title: '入库人', align: 'center'}
                    , {field: 'jsr', title: '经手人', align: 'center'}
                    , {field: 'rdate', title: '入库时间', align: 'center'}
                    , {fixed: 'right', title: '操作', toolbar: '#userBar', align: 'center'}
                ]]
                , limit: 5
                , limits: [3, 5, 8, 10, 20, 50]
            });
        }

        //监听头部工具栏
        table.on("toolbar(rukuTable)", function (obj) {
            switch (obj.event) {
                case 'refresh':
                    showTable();
                    break;
            }
        });

        //监听右侧工具栏
        table.on('tool(rukuTable)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            if (obj.event === 'information') {
                //layer.msg(JSON.stringify(data))
                showInformationDiv(data)
            }
        });

        //页面加载完成，调用的方法
        $(function () {
            //页面加载完成,初始化员工表
            showTable();
        });
        //渲染入库单表格-showTable()
        function showInformationTable(data) {

            console.log(data);

            table.render({
                elem: '#informationTable'
                , url:'${pageContext.request.contextPath}/ruku/queryId'
                , where: {ruid:data}

                , even: true //开启隔行背景
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'id', title: 'ID', align: 'center'}
                    , {field: 'facid', title: '设施Id', align: 'center', hide: true}
                    , {field: 'facname', title: '设施名', align: 'center'}
                    , {field: 'typename', title: '设施类型', align: 'center'}
                    , {field: 'rukuid', title: '入库Id', align: 'center'}
                    , {field: 'gys', title: '厂商', align: 'center'}
                    , {field: 'count', title: '数量', align: 'center'}
                    , {field: 'price', title: '进价', align: 'center'}
                ]]
            });
        }

        //打开订单详情弹出框
        function showInformationDiv(data) {
            var  id = data.ruid;
            layer.open({
                type: 1,
                anim: 3,
                title: ['入库详情', 'font-size:20px'],
                content: $("#informationDiv"),
                offset: '100px',
                area: '900px',
                success: function () {
                    $("#totalprice").html(data.totalprice);
                    $("#name").html(data.name);
                    $("#rdate").html(data.rdate);
                    showInformationTable(id)
                }
            })
        }

    })
</script>
</body>
<%--日期选择模块加载--%>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#searchCreatedTime' //指定元素
            , calendar: true
        });
        laydate.render({
            elem: '#searchEndTime' //指定元素
            , calendar: true
        });
    });
</script>
</html>
